오늘은 셀렉트박스(Selectbox UI)는 웹사이트에서 굉장히 많이 사용되는 인터페이스 UI 중 하나입니다. 간단하게 선택하여 사용하는 select 태그를 사용한 방식과 콤보박스라 불리는 좀 더 기능적 특징을 가진 UI로 구분할 수 있습니다. 오늘은 select 태그를 사용한 방법에 대하여 예제와 함께 알아보도록 하겠습니다.
# select 태그 선택폼 알아보기
먼저 select 태그는 방문자로 하여금 손쉽게 원하는 값을 선택할 수 있는 입력폼을 제공합니다. 그래서 방문자로 부터 입력값을 전달받아 서버에 저장하기 위해 통신할 때 간편한 인터페이스를 제공할 수 있습니다.
아래 있는 select 태그는 좋아하는 과일을 손쉽게 선택할 수 있는 가장 기본적인 형태의 인터페이스 모습입니다. 보시는 것처럼 간단하게 원하는 옵션값 중 선택이 가능하도록 UI를 제공합니다. 사용자 역시 해당 인터페이스에 매우 친숙하며 우측의 화살표를 통해 선택이 가능하다는 것을 손쉽게 인지할 수 있습니다.
위 코드의 경우 파인애플을 기본값으로 설정하였습니다.selected 속성값을 사용하여 input 태그에 함께 설정할 경우 위와 같이 페이지 로딩시 해당 옵션값이 지정되며 사용자가 아무것도 선택하지 않은 경우에 default로 사용할 수 있는 매우 자주 사용되는 속성입니다. select 박스를 구현할 경우 반드시 알아두셔야 하는 기본 속성 중 하나입니다.
# select 태그 예제소스 코드보기
아래는 이를 사용하여 만들어본 간단한 예제코드입니다. 방문자는 세가지 옵션값중 원하는 값을 선택하게됩니다.